<template>
  <div id="app">
    <div class="Sign">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <h3>智慧组</h3>
      </div>
      <!-- 登录表单 -->
      <el-form ref="loginFromRem" :model="loginForm" :rules="loginFormRules">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!-- 密码框 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-s-cooperation" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item prop="butto">
          <el-button type="primary" @click="dlBtn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import sha256 from 'sha256'
import { Loin } from '../api/login/login'
export default {
  components: {},
  props: {},
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'root@admin.com',
        password: sha256('123456')
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 100,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    async dlBtn() {
      try {
        const { data: res } = await Loin(this.loginForm)
        // 保存token值
        window.localStorage.setItem('token', res.token)
        this.$message.success('登录成功')
        // 跳转
        this.$router.push('/home')
      } catch (error) {
        this.$message.success(error)
      }
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped>
#app {
  height: 100%;
  background: url('../assets/images/logo.png') no-repeat bottom;
}
.Sign {
  position: absolute;
  left: 20%;
  top: 50%;
  width: 520px;
  padding: 35px 35px 15px 35px;
  margin: -200px 0 0 0;
  background: #f5f5f5;
}
.avatar_box {
  padding-bottom: 15px;
}
.el-input {
  margin: 10px 0;
}
</style>
